<template>
	<view class="orderList">
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">全部 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">进行中 <view :class="tabIndex==1?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==2?'active':''"  @click="chgTab(2)">已完成 <view :class="tabIndex==2?'active':''"></view></view>
		</view>
		<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
				@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF"  @scrolltolower='nextPage()'
				 
				 lower-threshold="500" class="" scroll-y :style="{height: orderHeight+'px'}">
			<view v-if="!isNull" class="courseList" v-for="(item,index) in getOrderlist" :key="index" @tap="openInfo(item.accompanyStatus,item.orderNo,item.status)">
				<view class="box d-ai-c d-jc-sb">
					<view class="list_l" v-if="item.type==1">
						订单类型：门诊陪伴
					</view>
					<view class="list_l" v-if="item.type==2">
						订单类型：血透门诊陪伴
					</view>
					<view class="list_l" v-if="item.type==3">
						订单类型：代配药门诊陪伴
					</view>
					<view class="" style="color: #55C47D; font-size: 28rpx;" v-if="item.status==2&&item.accompanyStatus==0">
						等待接单
					</view>
					<view class="" style="color: #ff8833; font-size: 28rpx;" v-if="item.status==2&&item.accompanyStatus==1">
						<view class="" style="color: #ff8833; font-size: 28rpx;" v-if="item.failStatus==0">
							待服务
						</view>
						<view class="" style="color: #ff8833; font-size: 28rpx;" v-if="item.failStatus==1">
							退款中
						</view>
						<view class="" style="color: #ff8833; font-size: 28rpx;" v-if="item.failStatus==2">
							退款失败
						</view>
						<view class="" style="color: #ff8833; font-size: 28rpx;" v-if="item.failStatus==3">
							退款成功
						</view>
					</view>
					<view class="" style="color: #ff8833; font-size: 28rpx;" v-if="item.status==3">
						服务中
					</view>
					<view class="" style="color: #55C47D; font-size: 28rpx;" v-if="item.status==5||item.status==4">
						已完成
					</view>
					
				</view>
				<view class="list_l mt-2">
					服务时间：{{item.startTime}}
				</view>
				<view class="list_l mt-2">
					出发地点：{{item.startAddress}}
				</view>
				<view class="list_l mt-2">
					就诊医院：{{item.name}}
				</view>
				<view class="remark mt-2 box">
					<view class="">
						备注：
					</view>
					<view class="">
						{{item.remark1==null?'暂无备注':item.remark1}}
					</view>
				</view>
				<view class="box d-jc-end mt-2" v-if="item.accompanyStatus==0">
					<view class="btn">
						我要接单
					</view>
				</view>
			</view>
			
		<view v-if="isNull" class="order_null">
			<image src="../../static/wudingdan@2x.png"></image>
			<text>暂时还没有订单~</text>
		</view>
		</scroll-view>
		<orange-fullloading textcolor="#4CA6FF" textsize="30" :loadshow="loadshow" text="加载中"></orange-fullloading>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				loadshow:true,
				isNull:false,
				hasNextPage:false,
				getOrderlist:[],
				pageNum:1,
				pageSize:10,
				tabIndex:'',
				orderHeight:400,
			}
		},
		computed: mapState(['loginState', 'userInfo']),
		onLoad() {
			this.chgTab(0)		
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(110) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onShow() {
			let carData = ''
			let _this = this
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 1) {
					console.log(carData)
					_this.chgTab(carData)
				} else if(carData == 3){
					_this.chgTab(carData)
				}else if(carData == 2){
					_this.chgTab(carData)
				}
			})
				this.getUserInfo()
		},
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			openInfo(accompanyStatus,orderNo,status){
				if(status==2&&accompanyStatus==0){
					uni.navigateTo({
						url:'../index/indexInfo?orderNo='+orderNo
					})
				}else if(status==2&&accompanyStatus==1){
					uni.navigateTo({
						url:'../index/orderInfo?orderNo='+orderNo
					})
				}else if(status==4||status==5||status==3){
					uni.navigateTo({
						url:'../index/orderInfo?orderNo='+orderNo
					})
				}
				
			},
			chgTab(index){
				this.tabIndex = index;
				if(index==0){
					this.payState = ''
					this.getOrderList('')
				}else if(index==1){
					this.payState = 1
					this.getOrderList(2)
				}else if(index==2){
					this.payState = 2
					this.getOrderList(4)
				}
				//TODO:::加载数据
			},
			getOrderList(status){
				this.status = status
				this.$api.myorder({
					accompanyId:this.userInfo.userInfo.userAccompanyInfo.accompanyId,
					status:status
				},this.pageNum,this.pageSize).then((res) => {
					this.loadshow = false
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.getOrderlist = res.data.dataMap.list
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.getOrderlist.length < 1 ? true : false
					}
							
				})
			},
			nextPage() {
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.myorder({
						accompanyId:this.userInfo.userInfo.userAccompanyInfo.accompanyId,
						status:this.status
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.getOrderlist.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			// 时间转换
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderList{
		background: #F2F7FF;
	}
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}
	
	.order_null image {
		margin: 0rpx auto;
		margin-top: 150rpx;
		width: 420rpx;
		height: 272rpx;
	}
	page{background: #F8F8F8;}
.tab{
  	 display: flex;
	 background-color: white;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
  	 .active{font-weight: bold;}
  	 .tab-item{
		 font-size: 28rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  
  .courseList{
	  width: 630rpx;
	  min-height: 282rpx;
	  background: #FFFFFF;
	  border-radius: 12rpx;
	  margin: 0 auto;
	  margin-top: 30rpx;
	  padding: 30rpx;
	  .list_l{
		  font-size: 30rpx;
		  font-weight: 500;
		  color: #333333;
	  }
	  .btn{
		  width: 180rpx;
		  height: 68rpx;
		  background: #4CA6FF;
		  border-radius: 34rpx;
		  font-size: 30rpx;
		  font-weight: 500;
		  color: #FFFFFF;
		  line-height: 68rpx;
		  text-align: center;
	  }
	  .remark{
		  width: 590rpx;
		  min-height: 100rpx;
		  background: #F2F7FF;
		  border-radius: 8rpx;
		  padding: 10rpx 20rpx;
		  view:nth-child(1){
			  width: 80rpx;
			  // border:1rpx solid red;
			  font-size: 26rpx;
			  font-weight: 500;
			  color: #666666;
		  }
		  view:nth-child(2){
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;

		  }
	  }
  }
</style>
